<template>
    <div class="body">
        <div class="banner"></div>
        <van-tabs background="#FEF9EF" color="#C84A26" title-active-color="#C84A26" v-model:active="active" swipeable>
            <van-tab title="部落">

                <van-list offset="100" v-model:loading="loading" :finished="finished" finished-text="没有更多了"
                    @load="onLoad">
                    <!-- 帖子列表 -->
                    <div class="post" v-for="i in postls" @click="router.push('/postdetail?id=' + i._id)">
                        <!-- 帖子标题，显示部落图标 -->
                        <div :style="{ backgroundImage: 'url(' + i.tribeId.icons + ')' }" class="tx"></div>
                        <p style="font-size: 14px;">
                            {{ i.title }}
                        </p>
                        <!-- 发布者用户名 -->
                        <p style="font-size: 13px; color: gray;">{{ i.userId.username }}</p>
                        <!-- 帖子内容 -->
                        <p class="font">{{ i.content }}</p>
                        <!-- 点赞和评论信息 -->
                        <p style="font-size: 13px; color: gray; margin-top: 20px;">
                            <!-- 点赞图标，点击切换点赞状态 -->
                            <van-icon :name="i.liked ? 'like' : 'like-o'" :color="i.liked ? 'red' : 'black'"
                                @click.stop="toggleLike(i)" />
                            {{ i.likes }}
                            <!-- 评论图标和评论数量 -->
                            <van-icon style="margin-left: 6px;" name="comment-o" />{{ i.comments.length }}
                        </p>
                    </div>
                </van-list>


            </van-tab>

            <van-tab title="活动">
                <div @click="goAct(i._id)" class="act" v-for="i in dataStore.actls">
                    <img :src="i.img" alt="">
                    <p>{{ i.title }}</p>
                </div>
            </van-tab>

        </van-tabs>

        <!-- 发布按钮 -->
        <van-floating-bubble axis="xy" @click="router.push('/addpost')" style="color: white; background-color: #90D433;"
            icon="edit" magnetic="x" />


        <van-overlay :show="show" @click="show = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <p style="text-align: center;">欢迎来到小树苗乐园，<br>选择加入一个你喜欢的部落</p>
                    <div @click="chk(i._id, index)" :class="index1 === index ? 'tribe active' : 'tribe'"
                        v-for="(i, index) in dataStore.tribels">
                        <img :src="i.icons" alt="">
                        {{ i.name }}
                    </div>
                    <button class="btn" @click=" show = false">确定加入</button>
                </div>
            </div>
        </van-overlay>

    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useDataStore } from "../stores/dataStore"
import { useRouter } from 'vue-router';
import axios from 'axios';
const dataStore = useDataStore()
const { getAllTribe, getAct } = dataStore
const active = ref(0)
const router = useRouter()
const page = ref(1)
const loading = ref(false);
const finished = ref(false);
const postls = ref([])
const show = ref(false)
const index1 = ref(0)


//触底加载
const onLoad = async () => {
    loading.value = true
    const { data: { ls, count } } = await axios.get("/getPost?page=" + page.value + "&limit=2");
    if (postls.value.length == count) {
        finished.value = true
    }
    setTimeout(() => {
        postls.value = postls.value.concat(ls)
        page.value++
        loading.value = false
    }, 500);
};

onMounted(() => {
    // 判断是否需要选择部落
    if (localStorage.getItem('tribe') == null) {
        show.value = true
    }
    getAct()
    getAllTribe()
})

//点赞
function toggleLike(post) {
    post.liked = !post.liked
    post.likes += post.liked ? 1 : -1
}


//跳转活动详情
function goAct(id) {
    router.push('/actdetail?id=' + id)
}

//选择部落
function chk(tribe, index) {
    index1.value = index
    localStorage.setItem('tribe', tribe)
}


</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.banner {
    height: 200px;
    background-color: #C84A26;
    background-image: url("./图片/buluo.webp");
    background-size: cover;
}

.body {
    background-color: #FEF9EF;
    min-height: 100vh;
}

.post {
    width: 94%;
    height: 150px;
    background-color: #FFFFFF;
    border-radius: 10px;
    margin: 20px auto;
    box-shadow: 0px 0px 5px #e7e5e5;
    padding: 10px;
    box-sizing: border-box;
}

.post p {
    margin: 5px 0;
}

.tx {
    width: 20px;
    height: 20px;
    background-color: #C84A26;
    border-radius: 50%;
    float: left;
    background-size: cover;
    margin-top: 5px;
    margin-right: 7px;
}

.font {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* 设置为纵向 */
    -webkit-line-clamp: 2;
    /* 显示的行数为2 */
    line-clamp: 2;
    /* 标准属性，显示的行数为2 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 溢出部分用省略号表示 */
    font-size: 13px;
    /* 字体大小 */
    color: rgb(168, 164, 164);
}

.act {
    color: #fff;
    background: linear-gradient(90deg, #c4743a, #894d20e9);
    border-radius: 10px;
    width: 350px;
    height: 100px;
    margin: 15px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    img {
        width: 80px;
        height: 80px;
        margin-left: 20px;
        border-radius: 10%;
    }


    p {
        margin-right: 20px;
    }
}



.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 260px;
    height: 360px;
    padding: 15px;
    border-radius: 10px;
    background-color: #fff;
}

.tribe {
    width: 100px;
    height: 125px;
    padding: 8px;
    box-sizing: border-box;
    text-align: center;
    margin-left: 20px;
    margin-top: 10px;
    float: left;
    border-radius: 10px;
}

.active {
    border: 1px solid #C28562;
    background-color: #FFFBF6;
}

.btn {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #C28562;
    color: #fff;
    border-radius: 20px;
    cursor: pointer;
    border: none;
    margin-top: 10px;
}
</style>